import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Form, Upload, Modal, Button, Icon, message} from 'antd';
import { baseUrl } from '../../config/system';
const FormItem = Form.Item;

class ExportDetailModal extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { children, dispatch,presetId,onCancel } = this.props;
    const { getFieldDecorator,resetFields,getFieldProps,getFieldValue,setFieldsValue } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

   const props = {
      name: 'file',
      action: baseUrl + '/instock/preset/importPreset?presetId='+presetId,
      beforeUpload(file) {
        const isJPG = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isJPG) {
          message.error('只能上传EXCEL文件！');
        }
        return isJPG;
      },
      onChange(info) {
        let fileList = info.fileList
        if (info.file.status === 'done') {
        if(info.file.response.httpCode==200){
          message.success(`${info.file.name} 上传成功`);
        }else{
          message.error(info.file.response.msg);
        }
          fileList = fileList.filter((file) => {
            return (file.response && file.response.fid);
          })
          //只保留最后一条记录
            fileList = fileList.slice(-1)
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败`);
        }
        let fildsValue = {}
        fildsValue['file'] = fileList.map((file) => {
          return file;
        })

        setFieldsValue(fildsValue);
      },
    };

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                visible={this.props.visible}
                 footer={[
                  <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
                ]}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <Form horizontal>
            <FormItem
              label="EXCEL文件"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              required
              hasFeedback
            >
            <Upload {...getFieldProps('file',{
              validate: [{
                rules: [
                  { type: "array", required: true, message: '请添加数据文件' },
                ],
                trigger: 'onBlur',
              }],
            },{valuePropName: 'fileIds'})} {...props} fileList={getFieldValue('file')}>
              <Button type="ghost">
                <Icon type="upload" /> 上传附件
              </Button>
            </Upload>
            </FormItem>
          </Form>

        </Modal>

      </span>
    );
  }

}

export default Form.create()(ExportDetailModal)
